<template>
<div>
<template>
  <!-- 表格 -->
  <el-table :data="applys" stripe border height="500">
    <el-table-column prop="id" sortable=true label="ID" width="65"/>
    <el-table-column prop="content" sortable=true label="申请内容"  width="85"/>
    <el-table-column prop="competition.competitionName" sortable=true label="竞赛名称"  width="85"/>
    <el-table-column prop="student.username" sortable=true label="负责人" width="85"/>
    <el-table-column prop="teacher.username" sortable=true label="指导老师" width="65"/>
    <el-table-column prop="group.groupName" sortable=true label="小组名称" width="85"/>
    <el-table-column prop="approvedStatus" sortable=true label="状态" width="85"/>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small"  type="success" @click="approve(scope.row)">
                   允许
                </el-button>
                <el-button size="small" type="danger" @click="reject(scope.row)">
                   拒绝
                </el-button>
            </template>
            </el-table-column>
  </el-table>

  <!-- 分页部分 -->
  <el-pagination
    small
    background
    layout="prev, pager, next"
    :page-size="competitionDTO.capacity"
    :current-page.sync="competitionDTO.index"
    @current-change="changeCurrent"
    :total="count"
    class="mt-4"
  />
</template>

</div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      // 当前登录的用户角色
      role: '竞赛',
      // 表格映射对象
      applys: [],
      competitionDTO: {
          index: 1,
          capacity: 5,
          competitionName: ''
      }
    }
  },
  // 页面初始化函数 
  created () {
    this.$http({
        url: "/apply",
        params: {
            index: ((this.competitionDTO.index-1)*this.competitionDTO.capacity) + 1,
            capacity: this.competitionDTO.capacity       
        }
    }).then(response => {
       this.applys = response.data
    })
  },
  methods: {
    approve(data) {
      this.$http.post('/competition/approved', data).then(response => {
          this.$message({
              message: '审批成功',
              type: 'success'
          })
          this.findAll()
      })
    },
    reject(data) {
      this.$http.post('/competition/reject', data).then(response => {
          this.$message({
              message: '拒绝成功',
              type: 'success'
          })
          this.findAll()
      })    
    },
    findAll() {
    this.$http({
        url: "/apply",
        params: {
            index: ((this.competitionDTO.index-1)*this.competitionDTO.capacity) + 1,
            capacity: this.competitionDTO.capacity       
        }
    }).then(response => {
       this.applys = response.data
    })
    }
  }
}
</script>
<style>

</style>